<style>
    #log {
        height: calc(100% - -5px);
        overflow: auto;
    }

    .w80 {
        width: 80px;
    }
</style>
<div class="layuimini-container layuimini-page-anim" style="height: calc(100% - 36px);">
    <div class="layuimini-main" style="height: 100%;">
        <div style="margin: 10px;float: right;">
            <button class="layui-btn layui-btn-primary layui-border-green w80" lay-event="download"> 下载 </button>
            <button class="layui-btn layui-btn-primary layui-border-blue w80" lay-event="refresh"> 刷新 </button>
            <button class="layui-btn layui-btn-primary layui-border-red w80" lay-event="delete"> 清空 </button>
        </div>
        <fieldset class="table-search-fieldset" style="clear: both;height: calc(100% - 70px);">
            <legend>RTU日志</legend>
            <div id="log">

            </div>
        </fieldset>
    </div>
</div>
<script src="../js/api.js" charset="utf-8"></script>
<script src="../js/ajaxRequest.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage;


        var logUrl = "/Log/GetRTULog"
        var dellogUrl = "/Log/DeleteRTULog"
        getLogData();
        $("button[lay-event='download']").click(function () {
            downloade(logUrl)
        })
        $("button[lay-event='refresh']").click(function () {
            getLogData()
        })
        $("button[lay-event='delete']").click(function () {
            layer.confirm('是否确认清空？', function (index) {
                deleteLogData()
            });

        })

        function downloade(href) {
            const a = document.createElement('a');
            a.setAttribute('href', href);
            a.setAttribute('download', "log");
            a.click();
        }

        function getLogData() {
            $("#log").empty();
            // $.ajax({
            //     url: logUrl + "?time=" + +new Date(),
            //     type: "GET",
            //     success: function (data) {
            //         if (data.data != null && data.data != "" && data.data != undefined) {
            //             data.data.forEach(element => {
            //                 element.Text = element.Text.replace("<br>", "")
            //                 $("#log").prepend(`<pre style="margin:5px">${element.CreateTime}  ${element.Text}</pre>`)
            //             });
            //             // $("#log").append(data.split("\r\n").map(e => `<pre>${e}</pre>`))
            //         }
            //     }
            // });
            GetRTULog().then(function (responseData) {
                var data = responseData
                if (data.data != null && data.data != "" && data.data != undefined) {
                    data.data.forEach(element => {
                        element.Text = element.Text.replace("<br>", "")
                        $("#log").prepend(`<pre style="margin:5px">${element.CreateTime}  ${element.Text}</pre>`)
                    });
                };
            })
        }
        function deleteLogData() {
            $("#log").empty();
            DeleteRTULog()
            // $.ajax({
            //     url: dellogUrl,
            //     type: "POST",
            //     success: function (data) {
            //         layer.msg(data.msg, {
            //             icon: 1,
            //             time: 1000,
            //         });
            //     }
            // });
        }

        // ws = new WebSocket('ws://localhost:8082/Websocket/ws');
        const hostname = window.location.hostname
        const port = window.location.port
        ws = new WebSocket('ws://' + hostname + ':' + port + '/Websocket/Serial/ws');
        ws.binaryType = 'arraybuffer'; // "blob";//
        // ws.onopen = () => {
        //     var sdata = {};
        //     sdata["name"] = "test"
        //     sdata["type"] = "test"
        //     sdata["Data"] = "test"
        //     //ws.send(JSON.stringify(sdata));
        // };
        ws.onmessage = (msg) => {
            if (msg != null && msg != undefined && msg.data != null && msg.data != undefined)
                //console.log('data', data)
                var data = JSON.parse(msg.data).Data
            var type = JSON.parse(msg.data).Type
            if (data != null && data != undefined && type != null && type != undefined) {
                if (type == "5") {
                    console.log('data2', data)
                    //采集数据    
                    if (data.indexOf('<br>') != -1) {
                        data = data.replace("<br>", "")
                    }
                    $("#log").prepend(`<pre style="margin:5px">${data}</pre>`)

                }
            }
        }

    });
</script>